<template>
  <div
    class="show-more-container"
    ref="showMoreRef"
    :style="bindStyle"
    v-if="visible"
  >
    <div v-if="scroll" class="show-more-scroll" @click="sendLoadMoreEvent">
      <span class="svg"></span>
      <span class="text">{{ bindShowMoreScrollText }}</span>
    </div>

    <div v-else class="pager-container">
      <a-pagination
        v-if="totalCount > 0"
        :current="currentPage"
        :total="totalCount"
        :pageSize="pageSize"
        :pageSizeOptions="pageSizeOptionsComputed"
        :showSizeChanger="showSizeChanger"
        :showQuickJumper="showQuickJumper"
        :showTotal="showTotalCount"
        @change="paginationChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, getCurrentInstance, onMounted, ref } from "vue";

const $t = getCurrentInstance()?.appContext.config.globalProperties.$t;

type Props = {
  // 当前页码
  currentPage: number;
  // 每页大小
  pageSize?: number;
  // 数据总条数
  totalCount?: number;
  // 是否显示分页器 pageSize 切换器
  showSizeChanger?: boolean;
  // 是否可以快速跳转至某页
  showQuickJumper?: boolean;
  // 用于显示数据总量和当前数据顺序
  showTotal?: boolean;
  // 分页大小 条数设置
  pageSizeOptions?: string[];
  visible?: boolean;
  pc?: boolean;
  scroll?: boolean;
  fetching?: boolean;
  // 样式 ==========
  // 分页器下边距
  pagerMb?: string;
};

const props = withDefaults(defineProps<Props>(), {
  visible: true,
  fetching: false,
  pc: false,
  scroll: false,
  gapTop: false,
  currentPage: 0,
  totalCount: 0,
  pageSize: 10,
  showSizeChanger: false,
  showQuickJumper: true,
  showTotal: true,
  pageSizeOptions: ["10", "20", "50"],
});

const showTotalCount = (total) => {
  if (props.showTotal) {
    return $t("pager_all_count").replace("%num", total);
  }
  return "";
};

const pageSizeOptionsComputed = computed(() => {
  return props.pageSizeOptions.filter(
    (item) => props.totalCount > parseInt(item)
  );
});

const bindStyle = computed(() => {
  let style: any = {};
  if (props.pc) {
    style.display = "block";
  }
  return style;
});

const bindShowMoreScrollText = computed(() => {
  let text = "";
  if (props.fetching) {
    text = $t("pagination.loading");
  } else {
    if (props.currentPage == props.totalCount) {
      text = $t("pagination.no_more");
    } else {
      if (props.scroll) {
        text = $t("pagination.complete");
      } else {
        text = $t("pagination.show_more");
      }
    }
  }
  return text;
});

const emits = defineEmits([
  "load-more",
  "update:currentPage",
  "update:pageSize",
  "change",
]);

const sendLoadMoreEvent = () => {
  if (props.totalCount <= props.currentPage) return;
  emits("load-more");
};

// 分页器change事件
const paginationChange = (page: number, pageSize: number) => {
  if (props.totalCount > pageSize) {
    emits("update:currentPage", page);
    if (props.pageSize) {
      emits("update:pageSize", pageSize);
    }
    emits("change", { page, pageSize });
  }
};

const showMoreRef = ref();
let observer;

const bindScrollEvent = () => {
  if (props.scroll) {
    observer = new IntersectionObserver(
      (mutations) => {
        if (mutations[0].isIntersecting) {
          sendLoadMoreEvent();
        }
      },
      {
        threshold: 1,
      }
    );
    observer.observe(showMoreRef.value);
  }
};

// css 相关
const pagerMb = computed(() => props.pagerMb || "2.0833vw");

onMounted(() => {
  bindScrollEvent();
});
</script>

<style lang="less">
.show-more-container {
  .ant-pagination {
    margin-bottom: v-bind(pagerMb);
    margin-top: 40px;
    .ant-pagination-options {
      display: flex;
      align-items: center;
    }
  }
}

@media screen and (max-width: 768px) {
  .show-more-container {
    .ant-pagination {
      margin: 123px 0;
      overflow-x: scroll;
      overflow-y: hidden;
      &::-webkit-scrollbar {
        height: 0;
        width: 0;
      }
      .ant-pagination-total-text,
      .ant-pagination-options {
        display: none;
      }
    }
  }
}
</style>

<style scoped lang="less">
.show-more-scroll {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #969696;
  margin: 40px 0;
}

@media screen and (max-width: 768px) {
  .show-more-container {
    display: block;
    margin: 0 !important;
  }
  .show-more-scroll {
    margin: 123px 0;
    font-size: 72px;
    gap: 61px;
    .svg {
      width: 82px;
      height: 82px;
    }
  }
}
</style>
